<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="queryParams" ref="queryParamsRef" :inline="true" label-width="100px">
        <el-form-item label="入院日期及时间" prop="admissionTime">
          <el-date-picker v-model="dateRange" :unlink-panels="true" end-placeholder="结束日期" range-separator="截止"
                          start-placeholder="开始日期" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                          @change="handleQuery"></el-date-picker>
        </el-form-item>
        <el-form-item label="住院号" prop="hospitalNo">
          <el-input v-model="queryParams.hospitalNo" clearable placeholder="请输入住院号" @keyup.enter="handleQuery"/>
        </el-form-item>
        <el-form-item label="患者名称" prop="name">
          <el-input v-model="queryParams.name" clearable placeholder="请输入患者名称" @keyup.enter="handleQuery"/>
        </el-form-item>
        <el-form-item label="入院科室" prop="deptAdmissionTo">
          <el-input v-model="queryParams.deptAdmissionTo" clearable placeholder="请输入入院科室"
                    @keyup.enter="handleQuery"/>
        </el-form-item>
        <el-form-item label="入院病区" prop="wardAdmissionTo">
          <el-input v-model="queryParams.wardAdmissionTo" clearable placeholder="请输入入院病区"
                    @keyup.enter="handleQuery"/>
        </el-form-item>
        <el-form-item>
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-adaptive="290" :border="true" :data="patVisitList" :header-cell-style="$headerCellStyle" :stripe="true"
              highlight-current-row>
      <el-table-column :align="'center'" label="住院号" prop="hospitalNo" width="120px"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="患者姓名" prop="name">
        <template #default="scope">
          <span class="ys-css">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="性别" prop="sex" width="100">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_user_sex']" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="年龄" prop="age" width="80px">
        <template #default="scope">
          {{ scope.row.ageAll }}
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="在院标识" prop="inFlag" width="120px">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['entry_and_exit_hospital_status']" :value="scope.row.inFlag"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="身份证号" prop="idNo" width="140px"/>
      <el-table-column :align="'center'" label="电话" prop="phone" width="95px"/>
      <el-table-column label="费别" :align="'center'" prop="chargeType" width="100px" :show-overflow-tooltip="true">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['medical_insurance_type']" :value="scope.row.chargeType"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="住院次数" prop="hospitalizationNumber" width="70"/>
      <el-table-column :align="'center'" label="病情状态" prop="situationType" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.deptFlag"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="入院情况" prop="hospitalSituation" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['admission_situation_dict']" :value="scope.row.hospitalSituation"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="隔离情况" prop="quarantine" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.quarantine"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="入院科室" prop="deptAdmissionToName" width="120px"/>
      <el-table-column :align="'center'" label="入院病区" prop="wardAdmissionToName" width="120px"/>
      <el-table-column label="入院时间" :align="'center'" prop="admissionTime" width="130">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.admissionTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="入院途径" prop="channel" width="120">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['patient_class_dict']" :value="scope.row.channel"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="是否在科室" prop="deptFlag" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.deptFlag"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="是否在病区" prop="wardFlag" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.wardFlag"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="护理等级" prop="nursingClass" width="120"/>
      <el-table-column :align="'center'" label="床号" prop="bedNo" width="100"/>
      <el-table-column :align="'center'" class-name="small-padding fixed-width" fixed="right" label="操作" width="120">
        <template #default="scope">
          <!--          <el-tooltip class="item" content="预交金" effect="dark" placement="top">-->
          <!--            <el-button circle type="warning" @click="advancePayment">-->
          <!--              <svg-icon icon-class="advancePayment"/>-->
          <!--            </el-button>-->
          <!--          </el-tooltip>-->
          <!--          <el-tooltip class="item" content="修改" effect="dark" placement="top">
                      <el-button circle type="success" @click="handleUpdate">
                        <i-ep-edit/>
                      </el-button>
                    </el-tooltip>-->

          <el-tooltip effect="dark" placement="left">
            <template #content>
              <div style="width: 400px">
                <el-row :gutter="20">
                  <el-col :span="12">住院号：{{ scope.row.hospitalNo }}</el-col>
                  <el-col :span="12">患者姓名：{{ scope.row.name }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="5">
                    <dict-data-tag :options="dictDataMap['sys_user_sex']"
                                   :value=" scope.row.sex "/>
                  </el-col>
                  <el-col :span="8">年龄：{{ scope.row.ageAll }}</el-col>
                  <el-col :span="11">生日：{{ $parseTime(scope.row.birthdayDate, '{y}-{m}-{d}') }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="5">
                    <dict-data-tag :options="dictDataMap['marriage_dict']"
                                   :value=" scope.row.marriage "/>
                  </el-col>
                  <el-col :span="8">
                    <dict-data-tag :options="dictDataMap['nation_dict']"
                                   :value="scope.row.nation"/>
                  </el-col>
                  <el-col :span="11">职业：
                    <dict-data-tag :options="dictDataMap['profession_dict']"
                                   :value="scope.row.occupation"/>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">联系人：{{ scope.row.contacts }}</el-col>
                  <el-col :span="6">
                    <dict-data-tag :options="dictDataMap['relationship_dict']"
                                   :value=" scope.row.contactsRelation "/>
                  </el-col>
                  <el-col :span="10">联系人电话：{{ scope.row.contactsPhone }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">联系人地址：{{ scope.row.contactsAddress }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">出生地：{{ scope.row.homePlace }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">籍贯：{{ scope.row.nativePlace }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">户口地址：{{ scope.row.registAddress }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">现住址：{{ scope.row.address }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">备注：{{ scope.row.remarks }}</el-col>
                </el-row>
              </div>
            </template>
            <el-button circle type="primary" @click="()=>isShowPopover = true">
              <svg-icon icon-class="cha-kan"/>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" content="取消登记" effect="dark" placement="right">
            <el-button v-if="scope.row.inFlag === '1' || scope.row.inFlag === '4'" circle type="danger"
                       @click="cancelRegistrationFun(scope.row)">
              <i-ep-delete/>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" content="修改" effect="dark" placement="right">
            <el-button v-if="scope.row.inFlag != '3'" circle type="success"
                       @click="anewRegistrationFun(scope.row)">
              <i-ep-edit/>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getList"/>
  </div>
  <el-drawer v-model="drawer" :close-on-click-modal="false" :direction="direction" size="60%" title="患者登记信息"
             @close="handleClose">
    <pat-visit-index-form ref="patVisitIndexFormRef" :is-show-drawer="false" @submit-ok="submitOk"/>
  </el-drawer>
</template>
<script lang="ts">
export default {
  name: "PatVisit"
}
</script>

<script setup lang="ts">
import patVisitIndexForm from "@/views/hospitalization/patVisitIndex/patVisitIndexForm.vue";
import {
  addPatVisit,
  delPatVisit,
  getPatVisit,
  listPatVisit,
  updatePatVisit,
  selectPagePatVisit,
  cancelRegistration,
  anewRegistration
} from "@/api/hospitalization/patVisit";
import {useUserStoreHook} from "@/store/modules/user";
import {useDictStoreHook} from "@/store/modules/dict";

const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('discharge_disposition_dict', 'patient_class_dict', 'sys_yes_no', 'admission_situation_dict',
  'entry_and_exit_hospital_status', 'medical_insurance_type', 'sys_user_sex', 'nation_dict', 'profession_dict', 'marriage_dict', 'relationship_dict'
))

const {proxy} = getCurrentInstance() as any;
const date = proxy.$parseTime(new Date(), "{y}-{m}-{d} ");
const patVisitIndexFormRef = ref()
const drawer = ref(false)
const direction = ('rtl')
const queryParamsRef = ref()
const patVisitList = ref([]);
const total = ref(0);
const dateRange = ref([date + "00:00:00", date + "23:59:59"]);
const isShowPopover = ref(false)
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  patientId: "",
  clinicId: "",
  hospitalNo: "",
  situationTime: "",
  situationType: "",
  hospitalSituation: "",
  quarantine: "",
  diagnosis: "",
  diagnosisCode: "",
  deptAdmissionTo: "",
  wardAdmissionTo: "",
  admissionTime: "",
  channel: "",
  source: "",
  confirmDoctor: "",
  wardDischargeTo: "",
  deptDischargeTo: "",
  dischargeTime: "",
  inFlag: "",
  deptFlag: "",
  wardFlag: "",
  deptStayed: "",
  wardCode: "",
  firstEnterDeptTime: "",
  enterDeptTime: "",
  firstEnterWardTime: "",
  enterWardTime: "",
  qualityNurse: "",
  dutyNurse: "",
  doctorInCharge: "",
  upperDoctor: "",
  directorDoctor: "",
  nursingClass: "",
  firstRoomNo: "",
  firstBedLabel: "",
  roomNo: "",
  bedLabel: "",
  bedNo: "",
  settledType: "",
  settledIndicator: "",
  halfwayDate: "",
  orgId: userInfo.orgId,
  remarks: "",
  leaveWithoutNewborn: "",
  isNewBornOutpHos: "",
  chanceDept: "",
  qualityTime: "",
  medicalQuality: "",
  liveHosType: "",
  qualityDoctor: "",
  lastAcctTime: "",
  feesNo: ""
})

/** 查询患者住院信息列表 */
function getList() {
  selectPagePatVisit(proxy.$addDateRange(queryParams.value, dateRange.value)).then((response: any) => {
    patVisitList.value = response.rows;
    total.value = response.total;
  });
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  // proxy.resetForm("queryRef");
  handleQuery();
}

/**
 * 取消登记
 * @param row
 */
function cancelRegistrationFun(row: any) {
  ElMessageBox.confirm('确定取消登记吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    cancelRegistration(row.visitId).then(() => {
      ElMessage.success("取消成功")
      getList()
    })
  }).catch(() => {
  })
}

/**
 * 重新登记
 * @param row
 */
function anewRegistrationFun(row: any) {
  drawer.value = true;
  nextTick(() => {
    patVisitIndexFormRef.value.anewRegistrationFun(row)
  })

}

function handleClose() {
  nextTick(() => {
    patVisitIndexFormRef.value.resetQuery()
  })
  drawer.value = false;
}

function submitOk() {
  drawer.value = false;
  getList()
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('business/patVisit/export', {
    ...queryParams.value
  }, `patVisit_${new Date().getTime()}.xlsx`)
}

getList();
</script>

<style scoped>

:deep(.el-drawer.rtl) {
  bottom: 0;
  height: 93%;
  top: 50px;
}
</style>
